<template>
	<view class="page">
		<my-navbar leftText="返回" @leftClick="leftClick"></my-navbar>
		<view class="content flex-center">
			<image class="icon" v-if="status" :src="success_img" alt=""></image>
			<image class="icon" v-else :src="fail_img" alt=""></image>
			<view>{{status?'支付成功!':'支付失败!'}}</view>
		</view>
		<view class="detail">
			<view class="flex-btw">
				<text>订单编号</text>
				<text>{{data.order_sn}}</text>
			</view>
			<view class="flex-btw">
				<text>流水号</text>
				<text>{{data.merOrderId}}</text>
			</view>
			<view class="flex-btw">
				<text>支付金额</text>
				<text>￥{{(data.totalAmount/100).toFixed(2)}}</text>
			</view>
			<view class="flex-btw">
				<text>支付时间</text>
				<text>{{data.payTime}}</text>
			</view>
			<view class="flex-btw">
				<text>支付状态</text>
				<text>{{status?'支付成功':'支付失败'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				success_img:'../../static/image/pay_success.png',
				fail_img:'../../static/image/pay_fail.png',
				data:{},
				status:null
			}
		},
		onReady(){
			getApp().setTitle();
			let data = {
				action:'onIframeReady',
				displayStyle:'SHOW_CUSTOM_PAGE',
				height:960
			}
			let params = JSON.stringify(data);
			parent.postMessage(params,'https://payapp.weixin.qq.com')
		},
		onLoad(option){
			this.data = option;
			if(option.status == 'TRADE_SUCCESS'){
				this.status = true;
			}else{
				this.status = false;
			}
		},
		methods: {
			leftClick(){
				if(this.status){
					//微信h5支付成功后有点金计划。而支付0元没有走微信支付。
					if(this.data.totalAmount==0){
						uni.switchTab({
							 url: '/pages/tabar/order'
						});	
					}else{
						let data = {
							action:'jumpOut',
							jumpOutUrl:`${location.origin}/cmp#/pages/tabar/order`
						}
						let params = JSON.stringify(data);
						parent.postMessage(params,'https://payapp.weixin.qq.com')					
					}
				}else{
					uni.switchTab({
						 url: '/pages/tabar/order'
					});					
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.page{
	max-height:1200rpx;
	font-size:32rpx;
	color:#191919;
	.content{
		padding-top:100rpx;
		flex-direction: column;
		font-weight: 600;
		.icon{
			width:160rpx;
			height:160rpx;
			margin-bottom:56rpx;
		}
	}
	.detail{
		padding:0 34rpx;
		margin-top:100rpx;
		>view{
			margin-bottom:24rpx;
		}
	}
}
</style>
